<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- css样式表 -->
    <link rel="stylesheet" href="../../css/base.css">
    <!-- <link rel="stylesheet" href="../../css/rateSearch.css"> -->
    <link rel="stylesheet" href="../../css//rate/goodList.css">
    <link rel="stylesheet" href="../../inc/include.css">

    <!-- js -->
    <script src="../../lib/zepto/zepto.js"></script>
    <script src="../../js/rateSearch.js"></script>
    <script src="../../js/htmlFont.js"></script>
    <script src="../../lib/template/template.js"></script>
    <script src="../../js/utils.js"></script>
</head>

<body>
    <header>
        <div class="header-top">
            <img src="../../images/header_logo.png" alt="">
            <img src="../../images/header_app.png" alt="">
        </div>
        <div class="header-footer">
            <input type="text" class="ipt" placeholder="请输入你想比价的商品">
            <a href="javascript:;">搜索</a>
        </div>
        <!-- <div class="kong"></div> -->
    </header>
    <div class="view">
        <!-- 头部菜单栏 -->
        <div class="goodTap">
            <div class="tap_left">

            </div>
            <div class="tap_right">
                <a href="javascript:;">
                    筛选
                </a>
            </div>
        </div>
        <!-- 商品列表栏 -->
        <div class="gl_list">
            <ul class="clearfix">

            </ul>
        </div>
        <!-- 上下页面 -->
        <form action="">
            <div class="gl_page clearfix">
                <input type="button" value="上一页" class="gp_pre fl">
                <select name="cars" class="gl_taps">

                </select>
                <input type="button" value="下一页" class="gp_next fr">
            </div>
        </form>
        <footer>
            <div class="footer-top">
                <ul>
                    <li>登录</li>
                    <li>注册</li>
                    <li class="go">返回顶部</li>
                </ul>
            </div>
            <div class="footer-footer">
                <div class="shouji">
                    <a href="javascript:;">手机APP下载</a>
                    <a href="javascript:;"> 慢慢买手机版</a>
                    <a href="javascript:;">-掌上比价平台</a>
                </div>
                <a href="javascript:;">m.mammambuy.com</a>

            </div>
        </footer>
    </div>
</body>

</html>
<!-- 渲染头部菜单栏 -->
<script type="text/template" id="goodTapList">
    {{each result as val key}}
        <span>
            <a href="../../index.html" data-href="">首页</a>
        </span>
        <span>
            <a href="./rateSearch.html">全部分类</a>
        </span>
        <span>
            <a href="javascript:;">{{val.category}}</a>
        </span>
    {{/each}}
</script>
<!-- 渲染商品列表 -->
<script type="text/template" id="glListTemp">
    {{each result as val key}}
        <li>
            
            <div class="gll_left fl">
                <a href="./goodsDetail.html?productId={{val.productId}}&categoryId={{val.categoryId}}" class="gl_img">
                    {{val.productImg}}
                </a>
            </div>
            <div class="gll_right fr">
                <span class="gr_title">
                    <a href="./goodsDetail.html?productId={{val.productId}}&categoryId={{val.categoryId}}">
                        {{val.productName}}
                    </a>
                </span>
                <span class="gr_price">
                    <a href="./goodsDetail.html?productId={{val.productId}}&categoryId={{val.categoryId}}">
                        {{val.productPrice}}
                    </a>
                </span>
                <div class="gr_bottom">
                    <span><a href="javascript:;">{{val.productQuote}}</a></span>
                    <span><a href="javascript:;">{{val.productCom}})</a></span>
                </div>
            </div>
        </li>
    {{/each}}
</script>
<script>
    
    // 获取地址	
    var htmls = location.href;
    localStorage.setItem("href",htmls);
    // console.log(htmls);
    // 
    // 根据ID的值获取
    var str = location.search;
    var id = utils.convertToObj(str).categoryId;
    // 当前页码
    var currentpage = 1;
    // 总页码
    var totalPage = 1;
    // 页码大小
    var pageSize;
    // 总条数
    var totalCount;
    // 渲染菜单页面
    $.ajax({
        type: "get",
        url: "http://193.112.55.79:9090/api/getcategorybyid",
        data: {
            categoryid: id
        },
        dataType: "json",
        success: function (res) {
            console.log(res);
            var htmlStr = template("goodTapList", res);
            // 渲染页面
            $(".tap_left").html(htmlStr);
            render();
            $(".tap_left").children().eq(0).children().attr("data-href",htmls);
        }
    })
    // 渲染商品列表
    function render() {
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getproductlist",
            data: {
                pageid: currentpage,
                categoryid: id,
            },
            dataType: "json",
            success: function (res) {
                console.log(res);
                // 存储商品列表模板
                template.config("escape", false)
                var htmlStr = template("glListTemp", res);
                // 渲染页面
                $(".gl_list ul").html(htmlStr);
                // // 存储每页大小
                pageSize = res.pagesize;
                // 存储总页码
                totalCount = res.totalCount;
                getpage(pageSize, totalCount, currentpage);
                // 存储 分页 模板
                // var htmlStr2 = template("glpageTemp".res);
                // $(".gl_page").html(htmlStr2);
            }
        })
    }


    function getpage(pageSize, totalCount, currentpage) {
        // console.log(pageSize);
        // console.log(totalCount);
        /* 
            一页有10个数据
            总条数 30 个
        */
        // 一页的数据
        // 存储总页码
        totalPage = parseInt(totalCount / pageSize);
        // 存储字符串
        var htmlStr;
        // 遍历总页数
        for (var i = 1; i <= totalPage; i++) {
            htmlStr += "<option value='" + i + "'>" + i + "/" + totalPage + "</option>";
        }
        $(".gl_taps").html(htmlStr);
        // 判断当前的页面
        var getindex = 0;
        // 遍历获取元素
        $(".gl_taps option").each(function (index, val) {
            // console.log(index+1);
            getindex = index + 1;
            if (getindex == currentpage) {
                $(this).prop("selected", "selected");
            }
        })
    }

    $(".gp_next").on("click", function () {
        currentpage++;
        console.log(currentpage);
        console.log(id)
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getproductlist",
            data: {

                pageid: currentpage,
                categoryid: id
            },
            beforeSend: function () {
                console.log('currentpage' + currentpage, 'categoryid' + id);
            },
            dataType: "json",
            success: function (res) {
                render();
            }
        })
        if (currentpage >= totalPage) {
            currentpage = totalPage;
            getpage(pageSize, totalCount, currentpage);
            return;
        }
        getpage(pageSize, totalCount, currentpage);

        // console.log(totalPage);
    })

    $(".gp_pre").on("click", function () {
        currentpage--;
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getproductlist",
            data: {
                pageid: currentpage,
                categoryid: id
            },
            beforeSend: function () {
                console.log('currentpage' + currentpage, 'categoryid' + id);
            },
            dataType: "json",
            success: function (res) {
                render();
            }
        })
        if (currentpage <= 1) {
            currentpage = 1;
            getpage(pageSize, totalCount, currentpage);
            return;
        }
        getpage(pageSize, totalCount, currentpage);
    })

    // 下拉列表改变了也会渲染
    $(".gl_taps").on("change", function (e) {

        // console.log(111);
        var values = $(this).children().attr("value");
        for (var i = 0; i < totalPage; i++) {
            if ($(this).children().eq(i).prop("selected") == true) {
                // console.log(11);
                currentpage = i + 1;
                break;
            }
        }
        console.log(currentpage);
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getproductlist",
            data: {
                pageid: currentpage,
                categoryid: id
            },
            dataType: "json",
            success: function () {
                console.log(111);
                render();
            }
        })
        return false;
    })

    
</script>